<template>
  <dialog_item :dialogTitle="$t('exception_list')" :visible.sync="standardDayVisible" :dialogClass="'specialDays'" :appendBody="true" :isNotShowDefaultBtn="true">
    <el-main>
      <el-row class="obpm-fromContent-title obpm-enterpriseDomain-logo" :gutter="24" >
        <el-col :span="12">{{$t('calendar_day')}}</el-col>
        <el-col :span="12" style="text-align:right">
          <span class="toolbar-buttons">
            <el-button type="primary" @click="onAddBtn" size="small">{{$t('new')}}</el-button>
            <el-button type="danger" @click="onDeleteBtn" size="small" plain>{{$t('del')}}</el-button>
          </span>
        </el-col>
      </el-row>
      <!-- 工作日历列表 -->
      <el-table :data="specialDays.datas"
        ref="multipleTable"
        :row-key="handleReserve"
        @row-click="onRowClick"
        @selection-change="handleSelectionChange"
        header-cell-class-name="tableHeaderbg"
        class="Trpointer"
        height="300">
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column :label="$t('calendarName')">
          <template slot-scope="scope">{{scope.row.calendar.name}}</template>
        </el-table-column>
        <el-table-column prop="startDate" :label="$t('start_date')" width="200px"></el-table-column>
        <el-table-column prop="endDate" :label="$t('end_date')" width="200px"></el-table-column>
        <el-table-column prop="remark" :label="$t('run')">
          <template slot-scope="scope">{{scope.row.workingDay ? $t('weekdays') : $t('non_weekdays') }}</template>
        </el-table-column>

        <el-table-column prop="remark" :label="$t('description')"></el-table-column>
        
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="getData"
        :current-page.sync="searchdata.currpage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="searchdata.pagelines"
        layout="prev, pager, next, total, sizes"
        background
        :total="specialDays.rowCount?specialDays.rowCount:0"
      ></el-pagination>
      
    </el-main>
    <specialDay_detail 
    :visible.sync="specialDayDetailVisible"  
    v-if="specialDayDetailVisible" 
    :mode="mode"
    @exit="onExit" :content="content"/>

    </dialog_item>
</template>

<script>

import specialDay_detail from "@/components/specialDay_detail.vue";

export default {
  components:{
    specialDay_detail,
  },
  data(){
    return {
      specialDays:[],
      specialDayDetailVisible:false,
      mode:'detail',
      multipleSelection:[],
      searchdata:{
        currpage:1,
        pagelines:10,
      }
    }
  },
  props:["visible","detail"],
  computed:{
    standardDayVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    handleSizeChange(size){
      this.searchdata.pagelines=size;
      this.getData();
    },
    handleReserve(row){
      return row.id
    },
    onRowClick(row){
      this.content=JSON.parse(JSON.stringify(row));
      this.mode='detail';
      this.specialDayDetailVisible=true;
      
    },
    getData(){
      this.$api.getSpecialDay(
        {domainid:this.$route.query.domainid,id:this.detail.id,currpage:this.searchdata.currpage,pagelines:this.searchdata.pagelines},
        {
          onSucess: resp => {
            this.specialDays = resp.data.data;
            this.specialDays.datas.forEach((elm)=>{
              elm.startDate=this.resolvingDate(elm.startDate)
              elm.endDate=this.resolvingDate(elm.endDate)
            })
            this.$nextTick(() => {
            this.$refs.multipleTable.doLayout()
          })
          }
        }
      );
    },
    onExit(){
      this.mode='detail';
      this.specialDayDetailVisible=false;
      this.getData();
    },
    handleSelectionChange(val){
      var arr = [];
       val.forEach((val) => {
        this.specialDays.datas.forEach((v) => {
          if(val.id == v.id){
            arr.push(val.id)
          }
        })
      })   
      this.multipleSelection = arr;
    },
    onAddBtn(){
      this.content={};
      this.content={
        "strstatus": "01",
        "startTime1": "",
        "endTime1": "",
        "startTime2": "",
        "endTime2": "",
        "startTime3": "",
        "endTime3": "",
        "startTime4": "",
        "endTime4": "",
        "startTime5":"" ,
        "endTime5": "",
        "remark": "",
        "startDate": "",
        "endDate": "",
        "workingDay":true,
        "calendar":this.detail
      };
      this.mode='new'
      this.specialDayDetailVisible=true;
    },
    onDeleteBtn(){
      if(this.multipleSelection.length>0){
        this.$confirm(this.$t('confirm_del'), this.$t('msg_tip'), {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }).then(() => {
          this.$api.deleteSpecialDay(
            {data:this.multipleSelection},
            {
              onSucess: resp => {
                if(resp.data.errcode==0){
                  this.$message({
                    showClose: true,
                    message: resp.data.data,
                    type: "success"
                  });
                  this.getData();
                }else{
                  this.$message({
                    showClose: true,
                    message: resp.data.data,
                    type: "error"
                  });
                }
              }
            }
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t("msg_cancel_del")
          });          
        });
        
      }else{
        this.$message({
          showClose: true,
          message: this.$t("select_one_data"),
          type: "error"
        });
      }
      
    },
    resolvingDate(date){
      let d = new Date(date);

      let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
      let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
      let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
      let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
      let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();

      let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;

      return times
    },
  },
};
</script>
<style lang="scss" scoped>

</style>